import React, { Component, Fragment } from 'react';

import { Form } from '@ant-design/compatible';

import {
  Card,
  Col,
  Input,
  Select,
  Row,
  Timeline,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Option } = Select;
const { Item } = Form;

interface OtherInfoProps {
  detailInfo: any;
  forms: object;
}

class OtherInfoElem extends Component<OtherInfoProps> {
  otherInfoElem = ({ getFieldDecorator }: any, detailInfo: any) => (
    <Card title="其他信息" bordered={false}>
      <Row gutter={12}>
        <Col md={8} sm={24}>
          <Item label="菜鸟驿站商家">
            {getFieldDecorator('cainiaoFlag', {
              initialValue: detailInfo.cainiaoFlag,
              rules: [{ required: true, message: '请选择菜鸟驿站商家' }],
            })(
              <Select placeholder="请选择">
                <Option value={1}>是</Option>
                <Option value={0}>否</Option>
              </Select>,
            )}
          </Item>
        </Col>
        <Col md={8} sm={24}>
          <Item label="　快递鸟编码">
            {getFieldDecorator('kdniaoCode', {
              initialValue: detailInfo.kdniaoCode,
              rules: [{ required: true, message: '请输入快递鸟对应编码' }],
            })(
              <Input allowClear placeholder="请输入" />,
            )}
          </Item>
        </Col>
        <Col md={8} sm={24}>
          <Item label="是否合作电商">
            {getFieldDecorator('symEshop', {
              initialValue: detailInfo.symEshop,
              rules: [{ required: true, message: '请选择是否合作电商' }],
            })(
              <Select placeholder="请选择">
                <Option value={1}>是</Option>
                <Option value={0}>否</Option>
              </Select>,
            )}
          </Item>
        </Col>
      </Row>
      <Row gutter={12}>
        <Col md={8} sm={24}>
          <Item label="　　菜鸟编码">
            {getFieldDecorator('cainiaoCode', {
              initialValue: detailInfo.cainiaoCode,
              rules: [{ required: true, message: '请输入菜鸟对应编码' }],
            })(
              <Input allowClear placeholder="请输入" />,
            )}
          </Item>
        </Col>
        <Col md={8} sm={24}>
          <Item label="快递100编码">
            {getFieldDecorator('exp100Code', {
              initialValue: detailInfo.exp100Code,
              rules: [{ required: true, message: '请输入快递100对应编码' }],
            })(
              <Input allowClear placeholder="请输入" />,
            )}
          </Item>
        </Col>
        <Col md={8} sm={24}>
          <Item label="　　是否启用">
            {getFieldDecorator('status', {
              initialValue: detailInfo.status,
              rules: [{ required: true, message: '请选择是否启用' }],
            })(
              <Select placeholder="请选择">
                <Option value={1}>是</Option>
                <Option value={0}>否</Option>
              </Select>,
            )}
          </Item>
        </Col>
      </Row>
    </Card>
  )

  logInfoElem = ({ getFieldDecorator }: any, detailInfo: any) => (
    <Card
      title="日志信息"
      bordered={false}
      bodyStyle={{ paddingBottom: 0, marginBottom: -20 }}
      className="paddingT20"
    >
      <Timeline>
        <Timeline.Item>最近操作人：{detailInfo.updateUserName}</Timeline.Item>
        <Timeline.Item>最近操作时间：{detailInfo.updateTime}</Timeline.Item>
        <Timeline.Item>创建人：{detailInfo.createUserName}</Timeline.Item>
        <Timeline.Item>创建时间：{detailInfo.createTime}</Timeline.Item>
      </Timeline>
    </Card>
  )

  render() {
    const { forms, detailInfo } = this.props;

    return (
      <Fragment>
        {this.otherInfoElem(forms, detailInfo)}
        {detailInfo.updateTime && this.logInfoElem(forms, detailInfo)}
      </Fragment>
    );
  }
}

export default OtherInfoElem;
